<template>
	<a-watermark class="watermark" content="趣貓坞" grayscale>
		<a-page-header @back="Back" title="用户注册" />
		<a-alert>所有信息将加密处理，请放心填写。</a-alert>
		<view :style="{ padding: '24px' }">
			<a-form size="large" scroll-to-first-error :rules="Rules" layout="vertical" :model="Form" @submit="Sign">
				<a-form-item field="name" label="您的姓名" required validate-trigger="blur" asterisk-position="end">
					<a-input v-model="Form.name" placeholder="请输入您的姓名" allow-clear />
				</a-form-item>
				<a-form-item field="phone" label="联系电话" required validate-trigger="blur" asterisk-position="end">
					<a-input-number placeholder="请输入您的联系电话" v-model="Form.phone" :max-length="11" allow-clear
						hide-button>
						<template #prepend>
							+86
						</template>
					</a-input-number>
				</a-form-item>
				<a-form-item field="roleId" label="您的角色" required validate-trigger="blur" asterisk-position="end">
					<a-select v-model="Form.roleId" placeholder="请选择您的角色" allow-clear @change="RoleChange">
						<a-option v-for="role in RoleList" :key="role.value"
							:value="role.value">{{ role.label }}</a-option>
					</a-select>
				</a-form-item>
				<view>
					<a-typography-title :heading="6">{{ Role.label }}</a-typography-title>
					<a-typography-paragraph type="secondary"> {{ Role.desc }} </a-typography-paragraph>
				</view>
				<a-form-item style="margin-top: 20px;">
					<a-button type="primary" :loading="loading" :style="{ height: '44px',fontSize: '16px' }" long
						html-type="submit">提交注册</a-button>
				</a-form-item>
			</a-form>
		</view>
	</a-watermark>

</template>

<script setup>
	import {
		Modal
	} from '@arco-design/web-vue';
	import {
		reactive,
		toRefs
	} from 'vue';


	const RoleList = reactive([{
			label: '宠物主',
			value: 1,
			desc: '可发布一些日常养护任务，如上门喂养、宠物寄养等'
		},
		{
			label: '设计师',
			value: 2,
			desc: '可发布一些设计任务，如宠物服装设计、宠物玩具设计等'
		},
		{
			label: '生产商',
			value: 3,
			desc: '可承接一些生产任务，如宠物服装生产、宠物玩具生产等'
		},
		{
			label: '企业',
			value: 4,
			desc: '可发布一些企业任务，如企业培训、企业活动等'
		},
		{
			label: '硬件或软件工程师',
			value: 5,
			desc: '可承接一些硬件或软件任务，如宠物智能穿戴设备、宠物智能喂食器等'
		}, {
			label: '服务人员',
			value: 6,
			desc: '可承接一些服务任务，如宠物美容、宠物洗浴、上门喂养等'
		}
	])

	const SignForm = reactive({
		Form: {
			name: '',
			phone: '',
			roleId: '',
		},
		Role: {},
		Rules: {
			name: [{
				required: true,
				message: '请输入您的姓名',
				trigger: 'blur'
			}],
			phone: [{
				required: true,
				message: '请输入联系方式',
				trigger: 'blur'
			}, {
				validator: (value, Fun) => {
					if (value && !/^1[3456789]\d{9}$/.test(value)) {
						return Fun('请输入正确的手机号')
					}
				}
			}],
			roleId: [{
				required: true,
				message: '请选择您的角色',
				trigger: 'blur'
			}]
		}
	})

	const {
		Form,
		Rules,
		Role,
		Visible
	} = toRefs(SignForm)

	const Back = () => {
		uni.navigateBack()
	}

	const RoleChange = (e) => {
		Role.value = RoleList.find(role => role.value === e)
	}

	const Sign = ({
		errors
	}) => {
		if (errors) {
			return
		}

		Modal.warning({
			title: '注册提示',
			content: '您的账户已成功激活。当前角色权限设置将保持现有状态，暂不支持修改。如有权限调整需求，请联系系统管理员进行后续操作。',
			width: '70vw',
			okText: '我知道了'
		});
		// Visible.value = true

	}
</script>

<style scoped lang="scss">
	.watermark {
		background: var(--color-bg-2);
	}
</style>